<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <title>定投复利计算器-前端路上</title>
    <meta content="定投复利计算器,保费计算" name="Keywords">
    <meta content="一个复利计算小工具，用来模拟年缴保费的支出情况，衡量重疾险的保费扛杆" name="Description">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="/asset/ui.css">
    <style>
    .modelData .btn{margin-bottom:4px;}
    </style>
    <script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?f10103677155b485824f29def715eb5d";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>

<body>
    <div class="wrap">
         <header class="tc m-tb">
            <h1>定投复利计算器</h1>
            <p>模拟保险产品的缴费方式，将总收益与保险保额对比，衡量这款产品的杠杆</p>
         </header>
         <form class="form m-b" id="form">
            <div class="form-group row">
                <label class="span-2 control-label">年投入（保费）</label>
                <div class="span-10">
                    <input type="number" class="form-control" id="nianfei" value="3390">
                </div>
            </div>
            <div class="form-group row">
                <label class="span-2 control-label">年数（缴费年数）</label>
                <div class="span-10">
                    <input type="number" class="form-control" id="nian" value="20">
                </div>
            </div>
            <div class="form-group row">
                <label class="span-2 control-label">投资年收益率</label>
                <div class="span-10">
                    <input type="number" class="form-control" id="lilv" value="4">
                </div>
            </div>
            <div class="form-group row">
                <label class="span-2 control-label">常见重疾险数据</label>
                <div class="span-10 modelData">
                    <button type="button" class="btn btn-info" data-baofei="1760,20,15">百年康惠保重疾</button>
                    <button type="button" class="btn btn-info" data-baofei="1780,20,15">瑞泰瑞盈重疾</button>
                    <button type="button" class="btn btn-info" data-baofei="4240,20,8">哆啦A保</button>
                    <div class="help-block">以上产品保费均为真实售价，被保险人89年出生男性、保费20万、缴费时长20年、保障到70周岁、附加轻症。</div>
                </div>
            </div>
            <div class="form-group row">
                <div class="pull-right-2 span-10">
                    <div class="help-block">注：每年收益的计算结果做四舍五入取整，因此会略有偏差</div>
                </div>
            </div>
            <div class="form-group">
                <div class="pull-right-2 span-10">
                    <button type="submit" class="btn btn-primary btn-lg">计算</button>
                </div>
            </div>
        </form>
        <div class="console">
            <div class="row">
                <div class="span-10 pull-right">
                    <h2 class="_title">到期总收益：<span class="text-danger">￥</span><strong class="text-danger" id="total">0</strong></h2>
                    <div class="_log">
                        <h4 class="_title">收益明细</h4>
                        <div id="log"></div>
                    </div>
                </div>
            </div>
        </div>
        <footer class="tc p m">
            技术支持：<a href="/" target="_blank">前端博客</a>&emsp;&emsp;产品来源：<a href="https://cps.qixin18.com/zt1029065" target="_blank">保险产品超市</a>
        </footer>
     </div>
    <script src="/asset/sea.js" id="seajsnode"></script>
    <script type="text/javascript" src="//static-zt.oss-cn-qingdao.aliyuncs.com/modules/manifest.js"></script>
    <script>
    seajs.config({
        base: "//static-zt.oss-cn-qingdao.aliyuncs.com/modules",
        alias: {
            "audio": "audio/audio",
            "copy": "copy/ZeroClipboard",
            "flv": "flv/flv",
            "hook": "hook/hook",
            "jquery": "jquery/1/jquery.js",
            "validform": "validform/validform",
            "My97DatePicker": "My97DatePicker/WdatePicker",
            "raty": "raty/raty",
            "upload": "upload/upload",
            "makethumb": "upload/makethumb",
            "localResizeIMG": "upload/localResizeIMG",
            "video": "video/video",
            "webuploader": "webuploader/webuploader",
            // localstorage缓存
            "seajs-localcache": "seajs/seajs-localcache",
            // debug
            "seajs-debug": "seajs/seajs-debug"
        }
    });
    </script>
    <script>
    /**
     * index
     */
    define('startmenu', function(require) {
        var $ = require('jquery');

        var $total = $('#total');
        var $log = $('#log');

        var jisuan = function(nianfei, nian, lilv){
            var shouyi = 0;
            var log = [];
            for(let i=0;i<nian;i++){
                let shouyiTemp = shouyi;
                shouyi = Math.round((nianfei+shouyiTemp)*(100+lilv)/100);
                log.push(`<p>第${i+1}年：积累本金：${shouyiTemp}，追加投入：${nianfei}，年终收益：${shouyi}</p>`)
            }
            $total.text(shouyi);
            $log.html(log.join(''));
        }

        var $form = $('#form');
        $form.on('submit', function(e){
            e.preventDefault();
            var nianfei = parseFloat($('#nianfei').val());
            var nian = parseFloat($('#nian').val());
            var lilv = parseFloat($('#lilv').val());
            if(nianfei && nian && lilv){
                jisuan(nianfei, nian, lilv)
            }
        });

        //示例数据
        $('.modelData').on('click', '.btn', function(e){
            var data = $(this).data('baofei').split(',');
            if(data && data.length){
                $('#nianfei').val(data[0])
                $('#nian').val(data[1])
                $('#lilv').val(data[2])
                $form.submit()
            }
        })
    });
    seajs.use('startmenu');
    </script>
</body>

</html>
